<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: xiong
  Date: 2020/7/11
  Time: 11:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>购物车页面</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<%--显示购物车列表--%>
<%--<form class="layui-form" action="" method="post" onsubmit=" return checkForm()">--%>
<form class="layui-form" action="/food/pay" method="post" onsubmit=" return checkForm()">
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="200">
            <col width>
        </colgroup>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="checkAll" title="选择所有" lay-filter="checkAll">
            </th>
            <th>食物名称</th>
            <th>单价</th>
            <th>食物描述</th>
            <th>数量选择</th>
        </tr>
        </thead>
        <tbody>

        <c:forEach items="${car}" var="food">
            <tr>
                    <%--选择框--%>
                <td>
                    <input type="checkbox" lay-filter="single" value="${food.id}" name="singleChoose">
                </td>
                    <%--   食物信息 --%>
                <td>${food.foodname}</td>
<%--                        商品单价--%>
                <td name="price" class="singlePrice">${food.price}</td>

                    <%-- 食物描述--%>
                <td>${food.remark}</td>
                    <%-- 选择数目--%>
                <td>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="addumm(this)">
                        <i class="layui-icon">&#xe654;</i>
                    </button>

                    <input placeholder="输入数量" value="1" style="width: 40px" name="foodnum" disabled="disabled">

                        <%-- 隐藏域，将ID和数目关联起来--%>
                    <input hidden="hidden" name="foodid-num" value="${food.id}">

                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="lessnum(this)">
                        <i class="layui-icon">&#xe67e;</i>
                    </button>
                </td>
            </tr>
        </c:forEach>
        <%--        结算行--%>
        <tr>
            <td>
                总计<span id="totalprice">0</span>
            </td>
            <td colspan="4" style="text-align: center">
                <input type="hidden" id="hiddenTotal" name="tprice">
                <button class="layui-btn" lay-submit lay-filter="pay">结算</button>
            </td>
        </tr>
        </tbody>
    </table>
</form>

</body>
</html>
<script>
    layui.use('form', function(){
        var form = layui.form;
        //选中所有的监听事件
        form.on('checkbox(checkAll)', function (data) {
            /*此处为匹配页面属性class="singleChoose" 可任意更换*/
            $("input[name='singleChoose']").each(function () {
                this.checked = data.elem.checked;
            });
            form.render('checkbox');
            if(data.elem.checked){
                let price=0
                $('.singlePrice').each(function () {
                    //获取当前行的数量
                    let val = $(this).next().next().children("input[name='foodnum']").val();
                    console.log('当前行的数量'+val);

                    price+=Number.parseFloat($(this).text())*Number.parseInt(val);
                })
                $('#totalprice').text(price);
            }else {
                $('#totalprice').text(0);
            }

        });

         //设置表单单选框的监听事件
        form.on('checkbox(single)', function (data) {

            //选中所有，全选按钮被选中
            var sib = $(data.elem).parents('table').find('tbody input[type="checkbox"]:checked').length;
            var total = $(data.elem).parents('table').find('tbody input[type="checkbox"]').length;
            if(sib == total){
                $(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked",true);
                form.render();
            }else{
                $(data.elem).parents('table').find('thead input[type="checkbox"]').prop("checked",false);
                form.render();
            }

            //单选发生变化，总价格也变化
            if(data.elem.checked){//当前行被选中。
                //拿到当前行商品单价
                let price = $(data.elem).parent().next().next().text();
                console.log(price);
                //拿到总价
                let curtotal = $('#totalprice').text();
                //拿到当前行的商品个数
                let val = $(data.elem).parents('table').find('tbody input[name="foodnum"]').val();
                //计算总价
                curtotal = Number.parseFloat(curtotal) + Number.parseFloat(price)*Number.parseInt(val);
                //更新总价
                $('#totalprice').text(curtotal);
            }else {//当前行取消选中

                let price = $(data.elem).parent().next().next().text();
                console.log(price);

                let curtotal = $('#totalprice').text();

                //拿到当前行的商品个数
                let val = $(data.elem).parents('table').find('tbody input[name="foodnum"]').val();

                curtotal = Number.parseFloat(curtotal) - Number.parseFloat(price)*Number.parseInt(val);
                //更新总价
                $('#totalprice').text(curtotal);
            }
        });

    });

    //加数量按钮
    function addumm(e) {
        //拿到input
        let val = $(e).next().val();
        let number = Number.parseInt(val);
        number+=1;
        $(e).next().val(number);
        //拿到商品单价
        var singlePrice=Number.parseInt($(e).parent().parent().find("td[name='price']").text());
        console.log(singlePrice)
        //拿到商品总价
        var curtotalPrice=Number.parseInt($('#totalprice').text());

        //判断当前行是否被选中
        let checked = $(e).parents('tr').find('input[name="singleChoose"]').prop('checked');
        if(checked){
            //总价-单价*1
            curtotalPrice=curtotalPrice+singlePrice;
            //更新总价格
            $('#totalprice').text(curtotalPrice)
        }

    }
    //减数量按钮
    function lessnum(e) {
        //拿到input
        let num = $(e).prev().prev().val();
        let number = Number.parseInt(num);
        if(number>1){
            number-=1;
            //改变输入框数字
            $(e).prev().prev().val(number);
            //拿到商品单价
            var singlePrice=Number.parseInt($(e).parent().parent().find("td[name='price']").text());
            console.log(singlePrice)
            //拿到商品总价
            var curtotalPrice=Number.parseInt($('#totalprice').text());

            //判断当前行是否被选中
            let checked = $(e).parents('tr').find('input[name="singleChoose"]').prop('checked');
            if(checked){
                //总价-单价*1
                curtotalPrice=curtotalPrice-singlePrice;
                //更新总价格
                $('#totalprice').text(curtotalPrice)
            }
        }else {
            alert("你要干什么？")
        }

    }
    //提交之前验证表单，拼接处食品ID和数量的关系。
    function checkForm() {
        var price = $("#totalprice").text();
        if (price == 0) {
            alert("请选择食物")
        } else {
            //结算时拼接隐藏域信息
            $("input[name='foodid-num']").each(function () {
                //要是当前行被选中。则执行拼接操作
                if($(this).parents('tr').find('input[name="singleChoose"]').prop('checked')){
                    let num = $(this).prev().val();
                    let foodid=$(this).val();
                    //拼接处一一对应的关系
                    $(this).val(foodid+':'+num);
                    console.log("遍历的ID和数量："+$(this).val());
                }
            })
            //更新隐藏域的总价
            $("#hiddenTotal").val(price)
            console.log("总价为："+$("#hiddenTotal").val());
            alert("下单完成")
            return true;
        }
        return false;
    }
</script>
